<template>
  <div class="detail">
    <div class="cont">
      <div class="det">
        <p>商品详情</p>
      </div>

      <div class="shop">
        <div class="shop_left">
          <div class="pic_t">
            <img 
              :src="this.pic"
             
              alt="img"
              width="350px"
              height="350px"
            />
          </div>

          <div class="pic_d">
            <span
              ><img
                :src="this.pic"
                id="zoom_01"
                :data-zoom-image="this.pic"
                alt="img"
                width="100px"
                height="100px"
            /></span>
            <span
              ><img
                :src="this.pic"
                alt="img"
                width="100px"
                height="100px"
            /></span>
            <span
              ><img
                :src="this.pic"
                alt="img"
                width="100px"
                height="100px"
            /></span>
          </div>
        </div>
        <div class="shop_right">
          <h2 class="name" >{{name}}</h2>
          <div class="type">
            <p>库存充足</p>
          </div>

          <div class="pce">
            <p>{{price}}</p>
          </div>

          <div class="text">
            <p>德国原装进口</p>

            <p>全国包邮</p>

            <p>货架号：008</p>
          </div>

          <div class="color">
            <span>颜色:</span>
            <span>白色/</span>
            <span>黑色/</span>
            <span>绿色/</span>
            <span>棕色/</span>
          </div>

          <div class="color_box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>

          <div class="size">
            <p>型号</p>
            <span>S</span>
            <span>M</span>
            <span>L</span>
          </div>

          <div class="chek"><span>加入购物车</span><span>立即购买</span></div>
        </div>
      </div>
    </div>

    <!-- 评论部分—————————————————————————————————————————————— -->

    <div class="cont">
      <div class="comt">
        <p>产品评论</p>
      </div>

      <div class="comt_t">
        <p class="comt_ct"><span>1</span>个评论</p>
      </div>
      <div class="comt_bd">
        <span class="user_p"
          ><img src="../../public/img/user.png" alt=""
        /></span>
        <div class="user">
          <div><span>222</span><span>333</span> <span>5分</span></div>
        </div>
        <div class="user_text"><p>很好很有精神</p></div>
      </div>

      <div class="add_text">
        <p>添加评论</p>
        <p>您的电子邮件地址不会被公开。 必填字段已标记 *</p>
      </div>

      <div class="add_star">
        <div>
          <p class="add_star2">请给产品评分</p>
          <span class="first"> <i class="iconfont icon-xingxing"></i></span>
          <span
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
          ></span>
          <span
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
          ></span>
          <span
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
          ></span>
          <span
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
            ><i class="iconfont icon-xingxing"></i
          ></span>
        </div>
      </div>

      <div class="text_b">
        <p>你的评论*</p>
        <textarea name="" id="" cols="30" rows="10" class=""> </textarea>
        <p>输入你的昵称*</p>
        <div><input type="text" class="name" /></div>

        <p>输入你的邮箱*</p>
        <div><input type="email" class="email" /></div>
        <p><input type="submit" class="send" /></p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  font-family: "Jost", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.detail {
  width: 100%;

  .cont {
    width: 1200px;
    margin: auto;

    .det {
      p {
        font-size: 26px;
        font-weight: 300;
        margin-top: 50px;
        z-index: 999;
      }
    }
    .shop {
      width: 880px;
      height: 600px;
      margin-top: 10px;

      position: relative;
      padding: 40px 30px;
      border: 1px solid #f1f1f1;

      .shop_left {
        width: 51.9480519%;
        float: left;
        padding-right: 20px;
        position: relative;
        .pic_t {
          border: #eeeeee solid 1px;
          width: 352px;
          height: 352px;
        }

        .pic_d {
          margin-top: 20px;
          width: 350px;
          display: flex;
          justify-content: space-between;

          span {
            border: #eeeeee solid 1px;
            cursor: pointer;
          }
        }
      }
      .shop_right {
        width: 48.0519481%;
        margin-top: 5px;
        padding-left: 30px;
        border-left: 0;
        float: right;
        .name {
          font-size: 26px;
          font-weight: 500;
          color: #333;
          margin-bottom: 9px;
          margin-top: -9px;
        }

        .type {
          font-size: 18px;
          color: #555555;
          margin-bottom: 10px;
        }
        .pce {
          font-size: 22px;
          font-weight: 500;
          color: #111111;
          margin-bottom: 20px;
        }
        .text {
          p {
            font-size: 14px;
            color: #666;
          }
        }

        .color {
          margin-top: 20px;
        }
        .color_box {
          margin-top: 10px;
          span {
            background-color: green;
            display: inline-block;
            width: 40px;
            height: 30px;
          }
          span:not(:first-child) {
            margin-left: 12px;
          }
          span:nth-child(1) {
            background-color: #fff;
            border: #6666 solid 1px;
          }

          span:nth-child(2) {
            background-color: #0a0a0a;
          }

          span:nth-child(3) {
            background-color: green;
          }

          span:nth-child(4) {
            background-color: #84664d;
          }
        }
        .size {
          margin-top: 20px;
          span {
            margin-top: 10px;
            border: #eeeeee solid 1px;
            background-color: #fff;
            color: #666;
            display: inline-block;
            width: 40px;
            height: 30px;
            text-align: center;
            cursor: pointer;
            transition: all linear 0.2s;
            &:hover {
              background-color: #7f87ab;
              color: #fff;
            }
          }
          span:not(:nth-child(2)) {
            margin-left: 18px;
          }
        }

        .chek {
          margin-top: 62px;
          span {
            background-color: #7f87ab;
            color: #fff;

            display: inline-block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
          }
          span:not(:nth-child(1)) {
            margin-left: 60px;
          }
        }
      }
    }

    // 评论部分————————————————————————————
    .comt {
      margin-top: 100px;
      border-bottom: solid 1px #ccc;
      height: 50px;

      p {
        font-size: 26px;
        font-weight: 300;
        margin-top: 50px;
        z-index: 999;
        text-align: center;
      }
    }
    .comt_t {
      margin-top: 30px;
    }
    .comt_bd {
      margin-top: 30px;

      .user_p {
        float: left;
      }
      .user {
        border-bottom: solid 1px #ccc;
        margin-left: 100px;
        margin-bottom: 5px;
        span:not(:first-child) {
          margin-left: 60px;
        }
        span:last-child {
          float: right;
        }
      }
      .user_text {
        margin-left: 100px;
        p {
          color: #666;
          font-size: 18px;
        }
      }
    }

    .add_text {
      margin-top: 30px;
      p:first-child {
        color: #666;
        font-size: 16px;
      }
      p:last-child {
        color: #666;
        font-size: 18px;
      }
    }

    .add_star {
      margin-top: 20px;
      .add_star2 {
        color: #666;
        font-size: 18px;
      }

      span {
        display: inline-block;
        padding: 12px;
        font-size: 18px;

        cursor: pointer;
        &:hover {
          color: gold;
        }
      }
      .first {
        padding: 0px;
        width: 26px;
      }
    }

    .text_b {
      p {
        margin-top: 20px;
        color: #666;
        font-size: 18px;
      }
      .name {
        width: 560px;
        outline: none;
        height: 42px;
        border: #666666 solid 1px;
      }
      .email {
        width: 560px;
        outline: none;
        height: 42px;
      }
      textarea {
        width: 1200px;
      }
      .send {
        width: 200px;
        color: #fff;
        background-color: #7f87ab;
        height: 50px;
        border: none;
        outline: none;
      }
    }
  }
}
</style>
<script>
import bus from "@/bus.js";
export default {
 
  data(){
    return{
      name:'',
      price:'',
      pic:'',
    }
  },


  mounted() {
    window.scrollTo(0, 100)
    
   
      bus.$off('det')
    bus.$on("det", (data) => {

        this.name=data.a
        this.price=data.b
        this.pic=data.c
        console.log(data.c);
        

    });

   

    
  },

  
};

	
</script>
